<template>
    <admin-framework :breadcrumb="breadcrumb">
        <div style="background-color: white" class="clearfix">
            <div class="col-md-4">
                <bar-chart id="bar" :bar-data="barData"/>
            </div>
        </div>
    </admin-framework>
</template>

<script>
    import AdminFramework from '../layout/framework/AdminFramework';
    import BarChart from 'vue-fiu-ui/src/main/js/components/chart/BarChart';

    export default {
        components: {
            BarChart,
            AdminFramework
        },
        data () {
            return {
                breadcrumb: {
                    title: 'Dashboard',
                    links: [
                        {
                            label: 'Home',
                            url: {name: 'Home'}
                        }, {
                            end: true,
                            label: 'Dashboard',
                            url: '#'
                        }
                    ]
                },
                barData: {
                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                    datasets: [
                        {
                            label: 'Data 1',
                            backgroundColor: 'rgba(220, 220, 220, 0.5)',
                            pointBorderColor: '#fff',
                            data: [65, 59, 80, 81, 56, 55, 40]
                        },
                        {
                            label: 'Data 2',
                            backgroundColor: 'rgba(26,179,148,0.5)',
                            borderColor: 'rgba(26,179,148,0.7)',
                            pointBackgroundColor: 'rgba(26,179,148,1)',
                            pointBorderColor: '#fff',
                            data: [28, 48, 40, 19, 86, 27, 90]
                        }
                    ]
                }
            };
        }
    };
</script>

<style scoped>

</style>
